<!-- 推广设置 -->
<template>
  <div>
    <div class="m-3">
      <Card>
        <div class="text-xl pb-2">产品信息</div>
        <div class="flex items-center">
          <div class="flex p-2 max-w-[50%]">
            <div class="flex-shrink-0">
              <Image
                :src="productPushConfig.imageUrl"
                width="80px"
                height="80px"
                style="object-fit: cover; border-radius: 4px"
              ></Image>
            </div>
            <div class="py-1 px-2 flex flex-col justify-between">
              <div class="line-clamp-2">{{ productPushConfig.productName }}</div>
              <Price
                _class="font-bold"
                :minprice="productPushConfig.productMinPrice"
                :maxprice="productPushConfig.productMaxPrice"
                :priceShowType="productPushConfig.priceShowType"
              />
            </div>
          </div>
          <Button
            class="flex-shrink-0"
            type="primary"
            ghost
            @click="openDetailModal(1, productPushConfig)"
            >产品详情</Button
          >
        </div>
      </Card>
    </div>
    <div class="m-3">
      <Card>
        <div class="text-xl pb-2">推广设置</div>
        <div>
          <Form
            :model="productPushConfig"
            :label-col="{ style: { width: '150px' } }"
            :wrapper-col="{ style: { width: 'calc(100% - 150px)' } }"
          >
            <FormItem label="推入选品广场">
              <Switch
                v-model:checked="productPushConfig.pushSelectItem"
                :checkedValue="WhetherOrNot.YES"
                :unCheckedValue="WhetherOrNot.NO"
              />
              <div class="text-[#86909C] pt-2">开启后，会把产品推入所有可见组织的选品广场</div>
            </FormItem>
            <!-- <FormItem label="精选板块可见">
              <Switch
                v-model:checked="productPushConfig.choicenessPlate"
                :checkedValue="WhetherOrNot.YES"
                :unCheckedValue="WhetherOrNot.NO"
              />
              <div class="text-[#86909C] pt-2">影响产品在精选板块内的显示跟隐藏</div>
            </FormItem> -->
            <FormItem label="可见组织">
              <div class="text-[#86909C] pb-2"
                >影响官方主动推广的场景内（选品广场），产品是否可见</div
              >
              <RadioGroup v-model:value="productPushConfig.pushShowType">
                <Radio
                  v-for="item in dicts.pushShowType"
                  :key="item.dictValue"
                  :value="item.dictValue"
                  >{{ item.dictLabel }}</Radio
                >
              </RadioGroup>
              <OrganizationList
                v-if="productPushConfig.pushShowType === PushShowType.PARTSHOW"
                v-model="productPushConfig.unionShowTenantLists"
              />
            </FormItem>
            <div class="text-right">
              <Space>
                <Button @click="cancel()">取消</Button>
                <Button type="primary" @click="onSubmit">保存设置</Button>
              </Space>
            </div>
          </Form>
        </div>
      </Card>
    </div>

    <ProductLibDetail @register="registerDetail"></ProductLibDetail>
  </div>
</template>

<script lang="ts" setup>
  import {
    Card,
    Image,
    Button,
    Form,
    FormItem,
    Switch,
    Space,
    RadioGroup,
    Radio,
  } from 'ant-design-vue';
  import OrganizationList from '../components/organizationList.vue';
  import { ref, unref } from 'vue';
  import Dictionary from '@/utils/dictionary';
  import { getProductPushConfig, setProductPushConfig } from '@/api/hby/resourceLeague/index';
  import { useRouter } from 'vue-router';
  import { ProductItem } from '@/api/hby/resourceLeague/type';
  import { formatMoney } from '@/utils/number';
  import { useModal } from '@/components/Modal';
  import ProductLibDetail from '@/views/hby/productManage/ProductLib/ProductLibDetail.vue';
  import { WhetherOrNot } from '@/enums/customFormEnum';
  import { PushShowType } from '@/enums/resourceLeague';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useTabs } from '@/hooks/web/useTabs';
  import Price from '@/components/Price/index.vue';
  import { min } from 'lodash-es';
  const dicts = Dictionary.getLocalMulti(['pushShowType']);

  const { currentRoute, back } = useRouter();
  const productPushConfig = ref({} as ProductItem);

  function getDetails() {
    const { id } = currentRoute.value.query;
    getProductPushConfig(id).then((res) => {
      productPushConfig.value = res;
    });
  }
  getDetails();

  const { createMessage } = useMessage();
  function onSubmit() {
    let params = {
      productLibId: unref(productPushConfig).id,
      pushSelectItem: unref(productPushConfig).pushSelectItem,
      choicenessPlate: unref(productPushConfig).choicenessPlate,
      pushShowType: unref(productPushConfig).pushShowType,
      tenantIds: unref(productPushConfig).unionShowTenantLists.map((v) => v.tenantId),
    };
    setProductPushConfig(params).then(() => {
      createMessage.success('保存设置成功');
    });
  }

  // 详情弹窗
  const [registerDetail, { openModal: openDetail }] = useModal();
  function openDetailModal(type: number, row: ProductItem) {
    row.id = row.productId;
    openDetail(true, { type, row });
  }

  // 取消
  const { close } = useTabs();
  function cancel() {
    back();
    close();
  }
</script>

<style lang="less" scoped></style>
